import {Image, StyleSheet, View, Text, TouchableOpacity, ImageBackground} from 'react-native';
import {Stack, useRouter} from "expo-router";
import AntDesign from '@expo/vector-icons/AntDesign';
import ruleImg from "@/assets/images/money/rule_img.png"
import {scaleSize} from "@/utils/screenSize";
import { getGrainRuleList } from '@/services/money'
import {useEffect, useState} from "react";
import {loadingService} from "@/utils/loadingServer";

export default function settingScreen() {

    const router = useRouter();
    const [ruleList, setRuleList] = useState([])

    useEffect(() => {
        loadingService.show();
        getGrainRuleList()
            .then(res => {
                console.log('res', res);
                setRuleList(res.data.rules);
                loadingService.hide();
            })
            .catch(err => {
                console.log('err', err);
                loadingService.hide();
            })
    }, [])

    return (
        <View style={{ height: "100%", backgroundColor: "#fff" }}>
            <Stack.Screen
                options={{
                    title: '规则说明', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#fff', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            {/*<ImageBackground source={ruleImg} style={styles.ruleContainer} resizeMode="cover">*/}

            {/*</ImageBackground>*/}
            <View style={styles.ruleContainer}>
                <View style={styles.ruleWrap}>
                    <View style={styles.ruleItem}>
                        <View style={[styles.action,styles.borRightWhite]}>
                            <Text style={styles.actionText}>行为</Text>
                        </View>
                        <View style={styles.ruleContent}>
                            <Text style={styles.ruleContentText}>数值变化</Text>
                        </View>
                    </View>
                    {
                        ruleList?.map((item: any, index: number) => {
                            return (
                                <View style={styles.BodyruleItem}>
                                    <View style={[styles.Bodyaction, styles.borRight]}>
                                        <Text style={styles.BodyactionText}>{ item.name }</Text>
                                    </View>
                                    <View style={styles.BodyruleContent}>
                                        <Text style={styles.BodyruleContentText}>{ item.amount }</Text>
                                    </View>
                                </View>
                            )
                        })
                    }
                </View>
            </View>
        </View>

    );
}

const styles = StyleSheet.create({
    // ruleContainer: {
    //     width: scaleSize(351),
    //     height: scaleSize(575),
    //     margin: "auto",
    //     marginTop: 0,
    // },
    ruleContainer: {
        padding: 12,
    },
    ruleWrap: {
        // borderColor: "#9C9EAC",
        // borderWidth: 1,
        borderRadius: 5,
        // overflow: "hidden",
    },
    ruleItem: {
        flexDirection: "row",
        width: scaleSize(351),
        height: 42,
        borderTopRightRadius: 5,
        borderTopLeftRadius: 5,
        overflow: "hidden",
    },
    action: {
        width: 250,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#EC6138",
    },
    actionText: {
        color: "#fff",
        fontSize: 16,
    },
    ruleContent: {
        flex: 1,
        flexDirection: "row",
        justifyContent: 'center',
        alignItems: "center",
        backgroundColor: "#EC6138",
    },
    ruleContentText: {
        color: "#fff",
        fontSize: 16,
    },
    BodyruleItem: {
        flexDirection: "row",
        width: scaleSize(351),
        height: 42,
        borderWidth: 0.5,
        borderColor: "#9C9EAC",
        borderTopWidth: 0,
    },
    Bodyaction: {
        width: 250,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        // backgroundColor: "#EC6138",
    },
    BodyactionText: {
        color: "#2A2B30",
        fontSize: 14,
    },
    BodyruleContent: {
        flex: 1,
        flexDirection: "row",
        justifyContent: 'center',
        alignItems: "center",
        // backgroundColor: "#EC6138",
    },
    BodyruleContentText: {
        color: "#2A2B30",
        fontSize: 14,
    },
    borRightWhite: {
        borderRightWidth: 0.3,
        borderRightColor: "#fff"
    },
    borRight: {
        borderRightWidth: 0.3,
        borderRightColor: "#9C9EAC"
    },
});
